<template>
  <div class="w-full" v-if="show">
    <div class="border border-zinc-200">
      <div class="pl-2 text-[#8d8d8d]">
        <span class="cursor-pointer">管理系统 ></span>
        <span class="cursor-pointer">商品管理</span>
      </div>
    </div>
    <div class="m-8 flex flex-col">
      <div class="bg-[#f0f0f0] flex justify-between">
        <div class="flex p-2">
          <button class="p-1 px-4 bg-blue-500 text-white" @click="add">
            +添加
          </button>
          <div class="flex ml-4">
            <input
              type="text"
              placeholder="请输入商品名"
              class="border border-zinc-400 outline-none px-2"
              v-model="shopSearch"
              @keydown.enter="search"
            />
            <div class="bg-[#fdc14b] cursor-pointer p-1 px-4" @click="search">
              <img
                src="https://i.postimg.cc/zf1tdxTz/image.png"
                alt=""
                class="w-6"
              />
            </div>
          </div>
          <div
            class="flex justify-center items-center ml-5 bg-[#bbbbbb] text-white rounded-lg"
            v-if="ifshow"
          >
            <button class="py-1 px-3" @click="refreshPage">返回</button>
          </div>
        </div>
        <div class="flex items-center pr-4">
          <p>
            共有商品：<span>{{ usernum }}</span
            >件
          </p>
        </div>
      </div>
      <div class="mt-8">
        <table class="table-flex">
          <tr class="bg-[#f0f0f0]">
            <th class="sm:w-[5%] xl:w-[1%] border border-zinc-300">id</th>
            <th class="sm:w-[8%] xl:w-[3%] border border-zinc-300">商品名称</th>
            <th class="w-[6%] xl:w-[3%] border border-zinc-300">商家</th>
            <th class="w-[25%] xl:w-[10%] border border-zinc-300">商品介绍</th>
            <th class="sm:w-[5%] xl:w-[2%] border border-zinc-300">类别</th>
            <th class="sm:w-[5%] xl:w-[2%] border border-zinc-300">价格</th>
            <th class="sm:w-[3%] xl:w-[1%] border border-zinc-300">商品</th>
            <th class="sm:w-[3%] xl:w-[2%] border border-zinc-300">操作</th>
          </tr>
          <tr
            v-for="item in pGoods"
            :key="item.id"
            class="border border-zinc-300"
          >
            <td class="text-center border border-zinc-300">
              {{ item.productId }}
            </td>
            <td class="text-center border border-zinc-300">
              {{ item.productName }}
            </td>
            <td class="text-center border border-zinc-300">
              {{ item.name }}
            </td>
            <td class="text-center border border-zinc-300">
              {{ item.description }}
            </td>
            <td class="text-center border border-zinc-300">
              {{ item.category }}
            </td>
            <td class="text-center border border-zinc-300">
              ￥{{ item.price }}
            </td>
            <td class="border border-zinc-300">
              <div class="flex justify-center items-center">
                <img
                  src="https://i.postimg.cc/C1h1X0m2/image.png"
                  alt=""
                  class="cursor-pointer opacity-10 sm:w-2/3 xl:w-1/2"
                  @click="drawerleft(item)"
                />
              </div>
            </td>
            <td class="">
              <div
                class="flex items-center justify-center border-1 border-zinc-300"
              >
                <img
                  src="https://i.postimg.cc/gJy8ypHH/1.png"
                  alt=""
                  class="sm:w-5 xl:w-8 cursor-pointer"
                  @click="changeshop(item)"
                />
                <img
                  src="https://i.postimg.cc/9062c6ss/image.png"
                  alt=""
                  class="sm:w-5 xl:w-8 xl:ml-3 cursor-pointer"
                  @click="deleteshop(item)"
                />
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="m-auto" v-if="!ifshow">
        <el-pagination
          :page-size="10"
          :pager-count="6"
          layout="prev, pager, next"
          :total="80"
          @current-change="getPageNum"
        />
      </div>
    </div>
    <el-drawer v-model="drawer" :with-header="false">
      <span class="bg-[#fdc14b] text-white px-2 py-1">{{ imgTitle }}</span>
      <div v-for="item in imgArr" class="w-full">
        <img :src="item" alt="" class="w-full" />
      </div>
      <div class="mt-5 flex justify-around">
        <input
          type="file"
          ref="fileUpload"
          @change="handleFileChange"
          class="w-1/2"
          multiple
        />
        <button @click="uploadImage" class="bg-[#fdc14b] text-white p-1">
          确认上传
        </button>
      </div>
    </el-drawer>
  </div>
  <el-dialog v-model="dialogVisible" title="确认修改" width="30%" draggable>
    <form action="" class="flex flex-col w-full">
      <label for="name" class="m-auto w-4/5">
        名称：
        <input
          id="name"
          type="text"
          class="border border-zinc-300 xl:w-2/3 outline-none"
          :placeholder="olduser.productName"
          v-model="newuser.productName"
        />
      </label>
      <label for="js" class="m-auto w-4/5">
        简介：
        <input
          id="js"
          type="text"
          :placeholder="olduser.description"
          v-model="newuser.description"
          class="border border-zinc-300 xl:w-2/3 outline-none"
      /></label>
      <label for="price" class="m-auto w-4/5">
        价格：
        <input
          id="price"
          type="text"
          :placeholder="olduser.price"
          v-model="newuser.price"
          class="border border-zinc-300 xl:w-2/3 outline-none"
      /></label>
      <label for="" class="m-auto w-4/5">
        类别：
        <select
          class="border border-zinc-300 xl:w-2/3 outline-none"
          v-model="newuser.shopcategory"
        >
          <option value="主食">主食</option>
          <option value="小吃">小吃</option>
          <option value="甜品">甜品</option>
          <option value="饮料">饮料</option>
        </select>
      </label>
    </form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(index)"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
  <div v-if="addshow" class="h-[90%] bg-[#f1f1f1a6]">
    <div class="border border-zinc-200">
      <div class="pl-2 text-[#8d8d8d]">
        <span class="cursor-pointer">管理系统 ></span>
        <span class="cursor-pointer" @click="isshow"> 商品管理 ></span>
        <span class="cursor-pointer">商品添加</span>
      </div>
    </div>
    <div class="flex justify-center items-center h-full">
      <div class="flex flex-col items-center w-1/2 bg-white">
        <div class="flex justify-center items-center">
          <span class="xl:text-[40px] sm:text-[20px] m-8"> 增加商品 </span>
        </div>
        <div class="sm:w-2/3 xl:w-1/2">
          <div class="w-full flex flex-row mb-4">
            <img
              src="https://i.postimg.cc/6qSp8vts/image.png"
              alt=""
              class="sm:w-[15%] xl:w-[10%]"
            />
            <input
              class="ml-4 w-full p-2 outline-none border border-zinc-400"
              type="username"
              placeholder="请输入商品名"
              v-model="commodity.productName"
            />
          </div>
          <div class="w-full flex flex-row mb-4">
            <img
              src="https://i.postimg.cc/9XNM8vTx/image.png"
              alt=""
              class="sm:w-[15%] xl:w-[10%]"
            />
            <input
              class="ml-4 w-full p-2 outline-none border border-zinc-400"
              type="psw"
              placeholder="请输入商家"
              v-model="commodity.name"
            />
          </div>
          <div class="w-full flex flex-row mb-4">
            <img
              src="https://i.postimg.cc/BQkH3QgN/image.png"
              alt=""
              class="sm:w-[15%] xl:w-[10%]"
            />
            <input
              class="ml-4 w-full p-2 outline-none border border-zinc-400"
              type="psw"
              placeholder="请输入商品介绍"
              v-model="commodity.description"
            />
          </div>
          <div class="w-full flex flex-row mb-4">
            <img
              src="https://i.postimg.cc/Gt9p3Q0J/image.png"
              alt=""
              class="sm:w-[15%] xl:w-[10%]"
            />
            <input
              class="ml-4 w-full p-2 outline-none border border-zinc-400"
              type="psw"
              placeholder="请输入价格"
              v-model="commodity.price"
            />
          </div>
          <div class="w-full flex flex-row mb-4">
            <img
              src="https://i.postimg.cc/B6m6Gzzn/image.png"
              alt=""
              class="sm:w-[15%] xl:w-[10%]"
            />
            <select
              class="ml-4 w-full outline-none border border-zinc-400"
              v-model="commodity.category"
            >
              <option value="主食">主食</option>
              <option value="小吃">小吃</option>
              <option value="甜品">甜品</option>
              <option value="饮料">饮料</option>
            </select>
          </div>
          <div>
            <input type="file" multiple @change="getimg" />
          </div>
        </div>
        <div class="flex m-4 justify-around w-full">
          <button
            class="flex items-center xl:text-[25px] sm:text-[16.5px] bg-[#FDC14B] rounded-lg text-white p-1"
            @click="isshow"
          >
            取消添加
          </button>
          <button
            class="flex items-center xl:text-[25px] sm:text-[16.5px] bg-[#FDC14B] rounded-lg text-white p-1"
            @click="addcommodity"
          >
            确认添加
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, computed, ref, onMounted } from "vue";
import axios from "axios";
let pGoods = ref([]);

let usernum = computed(() => {
  return pGoods.value.length;
});
function add() {
  return (addshow.value = true), (show.value = false);
}
let show = ref(true);
let addshow = ref(false);
function isshow() {
  return (show.value = true), (addshow.value = false);
}
onMounted(() => {
  axios
    .get(`http://1.14.126.98:8081/product/all`, {
      params: {
        current: pagenum.value,
        size: 10,
        sortField: "productId",
      },
    })
    .then((res) => {
      pGoods.value = res.data.records;
    })
    .catch((error) => {
      console.log(error);
    });
});
//分页查询所有商品
let pagenum = ref(1);
function getPageNum(val) {
  pagenum.value = val;
  axios
    .get(`http://1.14.126.98:8081/product/all`, {
      params: {
        current: pagenum.value,
        size: 10,
        sortField: "productId",
      },
    })
    .then((res) => {
      pGoods.value = res.data.records;
      console.log(res.data.records);
    })
    .catch((error) => {
      console.log(error);
    });
}
//根据id删除商品
function deleteshop(item) {
  axios
    .delete(
      `http://1.14.126.98:8081/product/deleteshop(user)Id=${item.userId}`,
      {}
    )
    .then((res) => {
      alert(res.data);
      axios
        .get(
          `http://1.14.126.98:8081/product/all?current=${pagenum.value}&size=10&sortField=productId`,
          {}
        )
        .then((res) => {
          pGoods.value = res.data.records;
        })
        .catch((error) => {
          console.log(error);
        });
    })
    .catch((error) => {
      console.log(error);
    });
}
//根据id修改商品
const dialogVisible = ref(false);
let olduser = ref({});
let newuser = ref({
  productName: "",
  description: "",
  price: "",
  shopcategory: "",
});
function changeshop(item) {
  dialogVisible.value = true;
  olduser.value = item;
}
function submit() {
  dialogVisible.value = false;
  axios
    .put(
      `http://1.14.126.98:8081/product/update?productId=${olduser.value.productId}&productName=${newuser.value.productName}&description=${newuser.value.description}&price=${newuser.value.price}&category=${newuser.value.shopcategory}`
    )
    .then((res) => {
      alert(res.data.data);
      axios
        .get(`http://1.14.126.98:8081/product/all`, {
          params: {
            current: pagenum.value,
            size: 10,
            sortField: "productId",
          },
        })
        .then((res) => {
          pGoods.value = res.data.records;
        })
        .catch((error) => {
          console.log(error);
        });
      newuser.value.productName = "";
      newuser.value.description = "";
      newuser.value.price = "";
      newuser.value.shopcategory = "";
    })
    .catch((error) => {
      console.log(error);
    });
}
//根据商品名字模糊搜索商品
let shopSearch = ref("");
function search() {
  axios
    .get(
      `http://1.14.126.98:8081/product/search?keyword=${
        shopSearch.value
      }&current=${pagenum.value}&size=10&sortField=${"productId"}`
    )
    .then((res) => {
      pGoods.value = res.data.records;
      ifshow.value = true;
    });
}
//查看和修改图片
let imgArr = ref([]);
let imgTitle = ref("");
let imgId = ref("");
let drawer = ref(false);
let ifshow = ref(false);
function drawerleft(item) {
  drawer.value = true;
  imgId.value = item.productId;
  imgTitle.value = item.name;
  imgArr.value = item.img.split(",");
  console.log(imgArr.value);
}
let file = ref();
function handleFileChange(e) {
  file.value = e.target.files[0];
}
const uploadImage = () => {
  const formData = new FormData();
  formData.append("productId", imgId.value);
  formData.append("images", file.value);
  fetch("http://1.14.126.98:8081/product/updateImages", {
    method: "PUT",
    body: formData,
  }).then((res) => {
    imgArr.value = res.json();
    ifshow.value = true;
  });
};
//添加商品
let commodity = reactive({
  img: [],
  productName: "",
  name: "",
  description: "",
  price: "",
  category: "",
});
function getimg(e) {
  commodity.img.push(e.target.files[0]);
}
function addcommodity() {
  const formData = new FormData();
  formData.append("images", commodity.img);
  formData.append("productName", commodity.productName);
  formData.append("name", commodity.name);
  formData.append("description", commodity.description);
  formData.append("price", commodity.price);
  formData.append("category", commodity.category);
  fetch("http://1.14.126.98:8081/product/add", {
    method: "post",
    body: formData,
  })
    .then((res) => {
      alert("添加成功");
    })
    .catch((error) => {
      console.log(error, data);
    });
  (commodity.img = []), (commodity.productName = "");
  commodity.name = "";
  commodity.description = "";
  commodity.price = "";
  commodity.category = "";
}
//返回
function refreshPage() {
  ifshow.value = false;
  axios
    .get(`http://1.14.126.98:8081/product/all`, {
      params: {
        current: pagenum.value,
        size: 10,
        sortField: "productId",
      },
    })
    .then((res) => {
      pGoods.value = res.data.records;
    })
    .catch((error) => {
      console.log(error);
    });
}
</script>
